<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title of document</title>
    <meta name="jinRan" content="width=device-width, initial-scale=1.0"></meta>
    <link rel="stylesheet" type="text/css" href="/css/cssDemo.css">
</head>
<body>
<!--iframe 内联框架 height 100% width 100% 根据百分比设置宽高
frame border 边框 0 无边框 1 有边框
iframe 可用作链接的目标target 链接的target属性必须引用iframe的name属性
javaScript
html的script标签用于定义客户端脚本 script元素可以包含脚本语句
javascript 的常见用途是图像处理，表单验证 和内容的动态更改
向html元素添加内容 document.getElementById("demo").innerHTML = "Hello javaScript!";
javaScript 改变样式 document.getElementById("demo").style.fontSize = "25px";
javaScript 改变颜色 document.getElementById("demo").style.color = "red";
javaScript 改变背景颜色 document.getElementById("demo").style.backgroundColor = "yellow";
javaScript 改变图片 src 属性 document.getElementById("image").src = "picture.gif";
html 中文件路径
文件路径 描述 了网页文件夹结构中某个文件的位置
文件路径会在链接外部文件时被用到
最好使用相对路径 避免出现文件找不到的问题

html head元素 是所有头部元素的容器 herd 中可以包含 样式表或者是元信息等
html title元素
    可以定义浏览器在工具栏中的标题
    提供页面被添加到收藏夹显示的标题
    显示在搜索引擎结果中的页面标题
html base元素 为页面上所有规定默认地址或默认目标 target 属性
    <base href="https://www.baidu.com/">
    <base target="_blank">
html link元素
    link 定义文档与外部资源之间关系
    <link rel="stylesheet" type="text/css" href="style.css">

html meta 元素
    是关于数据的信息 mate元素被用于规定页面描述,关键词文档作者最后修改时间以及其他元数据
    mate元素的name属性规定元数据的名称 content属性规定元数据的值

html 布局
使用div元素进行页面布局
定义外部的 样式表
<link rel="stylesheet" type="text/css" href="/css/cssDemo.css">

html5 网站布局
    header 定义文档或节的页眉
    nav 定义导航链接的容器
    section 定义文档中的节
    article 定义文档中的文章
    aside 定义侧栏内容
    footer 定义文档或节的页脚
    details 定义额外的细节

-->
<!--<iframe src="https://www.w3school.com.cn" name = "iframe_a" frameborder="0" width="100%" height="100%"></iframe>-->
<!--<p><a href="https://www.baidu.com" target="iframe_a">百度一下</a></p>-->
<div id ="header">
    <h1>city gallery</h1>
</div>

<div id ="nav">
    London<br>
    Paris<br>
    Rome<br>
</div>

<div id ="section">
    <h1>London</h1>
    <p>
        London is the capital city of England. It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.
    </p>
    <p>
        It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.
    </p>
</div>
<div id = "table">
    <table>
        <tr>
            <th>
                <img src="/img/girl_hair_pink_1108892_1920x1080.jpg" alt="picture" style="height: 120px;width: 120px">
            </th>
            <td>
                The table element was not designed to be a layout tool.
            </td>
        </tr>
    </table>
</div>
<div id = "footer" >
    Copyright jinDemo.com.cn
</div>

<!--<div>-->
<!--<p id="demo"></p>-->
<!--<img id="image" src="/img/girl_hair_pink_1108892_1920x1080.jpg" alt="picture" width="100" height="100">-->
<!--&lt;!&ndash;绝对路径 是指向一个文件或目录的完整URL,或者是网页的完整URL&ndash;&gt;-->
<!--<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">-->
<!--<img src="/img/girl_hair_pink_1108892_1920x1080.jpg" alt="girl" width="50%" height="100%">-->
<!--&lt;!&ndash;相对路径 是指向一个文件或目录的相对URL,或者是网页的相对URL&ndash;&gt;-->
<!--<img src="../img/girl_hair_pink_1108892_1920x1080.jpg" alt="girl" width="50%" height="100%">-->
<!--</div>-->
<!--<script>-->
<!--    document.getElementById("demo").innerHTML = "Hello javaScript!";-->
<!--    document.getElementById("demo").style.fontSize = "25px";-->
<!--    document.getElementById("demo").style.color = "red";-->
<!--    document.getElementById("demo").style.backgroundColor = "yellow";-->
<!--    document.getElementById("image").src = "picture.gif";-->
<!--</script>-->
<!--&lt;!&ndash;在浏览器中禁用了脚本或者浏览器不支持脚本的用户&ndash;&gt;-->
<!--<noscript>抱歉，您的浏览器不支持JavaScript</noscript>-->
</body>
</html>